<template>
<input
    class="zhtt-input"
    type="text"
    :value="modelValue"
    @input="emitValue">
</template>

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    },
    modelValueModifiers: {
      default: () => ({})
    }
  },
  created() {
    console.log('modelModifiers：',this.modelModifiers); // { capitalize: true }
    console.log('modelValueModifiers：',this.modelValueModifiers); // { capitalize: true }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize || this.modelValueModifiers.capitalize) {
        value = value.toUpperCase();
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>